<!-- 博客列表页面 - 展示博客文章列表，支持分类筛选、标签筛选和分页功能 -->
<template>
    <div class="blog-page">
        <!-- 统一导航栏组件 -->
        <AppHeader />

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="content-wrapper">
                <!-- 左侧边栏 - 包含用户信息、分类导航和标签筛选 -->
                <aside class="sidebar">
                    <!-- 用户信息卡片 - 显示博主头像和基本信息 -->
                    <div class="profile-card">
                        <div class="profile-avatar">
                            <img src="/src/assets/pic/avatar.jpg" alt="博主头像" />
                        </div>
                        <h3 class="profile-name">零の守墓人</h3>
                        <p class="profile-desc">生活记录</p>
                    </div>

                    <!-- 联系方式卡片 - 显示联系方式的头像 -->
                    <div class="contact-card">
                        <h4 class="card-title">联系方式</h4>
                        <div class="contact-images">
                            <!-- QQ联系方式 -->
                            <div class="contact-image qq-contact" @click="handleContactClick('qq')">
                                <img src="../assets/icons/qq.svg" alt="QQ" />
                                <span class="contact-label">QQ</span>
                            </div>
                            <!-- 微信联系方式 -->
                            <div class="contact-image wechat-contact" @click="handleContactClick('wechat')">
                                <img src="../assets/icons/wechat.svg" alt="微信" />
                                <span class="contact-label">微信</span>
                            </div>
                            <!-- GitHub联系方式 -->
                            <div class="contact-image github-contact" @click="handleContactClick('github')">
                                <img src="../assets/icons/github.svg" alt="GitHub" />
                                <span class="contact-label">GitHub</span>
                            </div>
                        </div>
                    </div>

                    <!-- 分类卡片 - 提供分类导航功能 -->
                    <div class="category-card">
                        <h4 class="card-title">分类</h4>
                        <div class="category-list">
                            <!-- 技术分类组 -->
                            <div class="category-group">
                                <div class="category-header" :class="{ active: selectedCategory === 'tech' }">
                                    <span class="category-title" @click.stop="handleCategoryClick('tech')">技术</span>
                                    <el-icon :class="{ rotated: openCategories.tech }"
                                        @click.stop="toggleSidebarCategory('tech')">
                                        <ArrowDown />
                                    </el-icon>
                                </div>
                                <!-- 技术子分类列表 -->
                                <div class="subcategory-list" :class="{ active: openCategories.tech }">
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('tech', 'frontend')">前端开发</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('tech', 'backend')">后端开发</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('tech', 'mobile')">移动开发</span>
                                </div>
                            </div>
                            <!-- 生活分类组 -->
                            <div class="category-group">
                                <div class="category-header" :class="{ active: selectedCategory === 'life' }">
                                    <span class="category-title" @click.stop="handleCategoryClick('life')">生活</span>
                                    <el-icon :class="{ rotated: openCategories.life }"
                                        @click.stop="toggleSidebarCategory('life')">
                                        <ArrowDown />
                                    </el-icon>
                                </div>
                                <!-- 生活子分类列表 -->
                                <div class="subcategory-list" :class="{ active: openCategories.life }">
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('life', 'daily')">日常记录</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('life', 'travel')">旅行游记</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('life', 'food')">美食分享</span>
                                </div>
                            </div>
                            <!-- 感想分类组 -->
                            <div class="category-group">
                                <div class="category-header" :class="{ active: selectedCategory === 'thoughts' }">
                                    <span class="category-title" @click.stop="handleCategoryClick('thoughts')">感想</span>
                                    <el-icon :class="{ rotated: openCategories.thoughts }"
                                        @click.stop="toggleSidebarCategory('thoughts')">
                                        <ArrowDown />
                                    </el-icon>
                                </div>
                                <!-- 感想子分类列表 -->
                                <div class="subcategory-list" :class="{ active: openCategories.thoughts }">
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('thoughts', 'reading')">读书笔记</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('thoughts', 'movie')">观影感受</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('thoughts', 'music')">音乐分享</span>
                                </div>
                            </div>
                            <!-- 教程分类组 -->
                            <div class="category-group">
                                <div class="category-header" :class="{ active: selectedCategory === 'tutorial' }">
                                    <span class="category-title" @click.stop="handleCategoryClick('tutorial')">教程</span>
                                    <el-icon :class="{ rotated: openCategories.tutorial }"
                                        @click.stop="toggleSidebarCategory('tutorial')">
                                        <ArrowDown />
                                    </el-icon>
                                </div>
                                <!-- 教程子分类列表 -->
                                <div class="subcategory-list" :class="{ active: openCategories.tutorial }">
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('tutorial', 'beginner')">入门教程</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('tutorial', 'advanced')">进阶教程</span>
                                    <span class="subcategory-item"
                                        @click.stop="handleSubcategoryClick('tutorial', 'tools')">工具使用</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 标签卡片 - 提供标签筛选功能 -->
                    <div class="tags-card">
                        <h4 class="card-title">标签</h4>
                        <div class="tags-list">
                            <!-- 技术标签列表 -->
                            <span class="tag-item" :class="{ active: selectedTag === 'Vue.js' }"
                                @click.stop="handleTagClick('Vue.js')">Vue.js</span>
                            <span class="tag-item" :class="{ active: selectedTag === 'TypeScript' }"
                                @click.stop="handleTagClick('TypeScript')">TypeScript</span>
                            <span class="tag-item" :class="{ active: selectedTag === 'CSS' }"
                                @click.stop="handleTagClick('CSS')">CSS</span>
                            <span class="tag-item" :class="{ active: selectedTag === 'JavaScript' }"
                                @click.stop="handleTagClick('JavaScript')">JavaScript</span>
                            <span class="tag-item" :class="{ active: selectedTag === 'Node.js' }"
                                @click.stop="handleTagClick('Node.js')">Node.js</span>
                        </div>
                    </div>
                </aside>

                <!-- 主内容区域 - 显示博客文章列表和分页 -->
                <section class="content-area">
                    <!-- 示例数据提示 -->
                    <div v-if="isUsingSampleData" class="sample-data-notice">
                        <el-alert title="示例数据" description="当前显示的是示例数据，因为后端服务暂时不可用。您可以正常浏览和测试页面功能。" type="info"
                            :closable="false" show-icon>
                        </el-alert>
                    </div>

                    <!-- 博客文章列表 - 循环渲染筛选后的文章 -->
                    <div class="blog-list">
                        <article class="blog-item" v-for="(post, index) in currentPagePosts" :key="post.id">
                            <!-- 博客展示图片 - 支持交替布局 -->
                            <div class="blog-image"
                                :class="{ 'image-first': index % 2 === 0, 'image-last': index % 2 === 1 }">
                                <div class="image-container">
                                    <img :src="post.imageUrl || blogDefaultImage" :alt="post.title" />
                                </div>
                            </div>

                            <!-- 博客内容区域 - 支持交替布局和点击跳转 -->
                            <div class="blog-content"
                                :class="{ 'content-first': index % 2 === 0, 'content-last': index % 2 === 1 }"
                                @click="navigateToBlogDetail(post.id)">
                                <h2 class="blog-title">{{ post.title }}</h2>
                                <p class="blog-intro">{{ post.introduction }}</p>
                                <div class="blog-meta">
                                    <span class="blog-date">创建时间: {{ post.createTime }}</span>
                                    <div class="blog-actions">
                                        <!-- 点赞按钮 - 支持点赞状态切换 -->
                                        <button class="like-btn" :class="{ liked: post.isLiked }"
                                            @click.stop="toggleLike(post.id)">
                                            <el-icon>
                                                <User />
                                            </el-icon>
                                            <span class="like-count">{{ post.likes }}</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>

                    <!-- 分页组件 - 支持页码切换和页面大小调整 -->
                    <div class="pagination-wrapper">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :total="totalPosts" :page-sizes="[5, 10, 20, 50]"
                            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" background />
                    </div>
                </section>
            </div>
        </main>

        <!-- 统一页脚组件 -->
        <AppFooter />
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据、计算属性、监听器和生命周期钩子
import { ref, computed, watch, onMounted } from 'vue'
// Vue Router - 提供路由导航和路由参数获取功能
import { useRouter, useRoute } from 'vue-router'

// Element Plus 图标组件和消息组件 - 用于界面图标显示和消息提示
import { User, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// API工具函数导入
import { get, post } from '../utils/api'
import { API_PATHS } from '../constants/api'

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件

// 导入博客示例图片
import blogTestImage from '../assets/pic/blog_test.jpg'
import blogDefaultImage from '../assets/pic/blog_test.jpg'  // 暂时使用同一张图片作为默认图片

// ==================== 类型定义 ====================

/**
 * 博客文章类型定义
 */
interface BlogPost {
    id: number
    title: string
    introduction: string
    createTime: string
    likes: number
    isLiked: boolean
    category: string
    subcategory: string
    tags: string[]
    imageUrl?: string
}

// 路由实例获取
const router = useRouter()  // 用于编程式导航
const route = useRoute()    // 用于获取当前路由信息

// ==================== Props 定义 ====================

// 定义组件接收的props接口
interface Props {
    category?: string    // 分类参数，用于筛选文章
    subcategory?: string // 子分类参数，用于进一步筛选文章
    tag?: string        // 标签参数，用于按标签筛选文章
}

// 设置props的默认值
const props = withDefaults(defineProps<Props>(), {
    category: '',
    subcategory: '',
    tag: ''
})

// ==================== 响应式数据 ====================

/**
 * 当前分页的页码
 * @description 用于分页组件，表示当前显示的是第几页，默认为第1页
 */
const currentPage = ref(1)

/**
 * 每页显示的文章数量
 * @description 控制分页组件中每页显示多少篇文章，默认为5篇
 */
const pageSize = ref(5)

/**
 * 侧边栏各分类的展开/收起状态
 * @description 控制侧边栏中每个分类的子分类列表是否展开显示
 */
const openCategories = ref({
    tech: false,      // 技术分类的展开状态
    life: false,      // 生活分类的展开状态
    thoughts: false,  // 感想分类的展开状态
    tutorial: false   // 教程分类的展开状态
})

/**
 * 当前选中的分类
 * @description 用于高亮显示当前选中的分类，默认为技术分类
 */
const selectedCategory = ref('tech')

/**
 * 当前选中的标签
 * @description 用于高亮显示当前选中的标签，默认为空
 */
const selectedTag = ref('')

/**
 * 示例数据 - 当API调用失败时显示的备用数据
 * @description 包含各种分类和标签的示例博客文章，用于演示页面功能
 */
const sampleBlogPosts: BlogPost[] = [
    {
        id: 1,
        title: 'Vue 3 组合式 API 深度解析',
        introduction: '深入探讨Vue 3组合式API的设计理念、使用方法和最佳实践，帮助你更好地理解现代Vue开发模式。',
        createTime: '2024-01-15',
        likes: 128,
        isLiked: false,
        category: 'tech',
        subcategory: 'frontend',
        tags: ['Vue.js', 'JavaScript', '前端开发'],
        imageUrl: blogTestImage
    },
    {
        id: 2,
        title: 'TypeScript 高级类型系统详解',
        introduction: '全面介绍TypeScript的高级类型特性，包括泛型、条件类型、映射类型等，提升代码的类型安全性。',
        createTime: '2024-01-12',
        likes: 95,
        isLiked: true,
        category: 'tech',
        subcategory: 'frontend',
        tags: ['TypeScript', 'JavaScript', '前端开发'],
        imageUrl: blogTestImage
    },
    {
        id: 3,
        title: 'CSS Grid 布局完全指南',
        introduction: '从基础到高级，全面掌握CSS Grid布局系统，创建响应式、灵活的网页布局。',
        createTime: '2024-01-10',
        likes: 76,
        isLiked: false,
        category: 'tech',
        subcategory: 'frontend',
        tags: ['CSS', '前端开发', '布局'],
        imageUrl: blogTestImage
    },
    {
        id: 4,
        title: 'Node.js 性能优化实践',
        introduction: '分享Node.js应用性能优化的实用技巧，包括内存管理、异步处理、缓存策略等。',
        createTime: '2024-01-08',
        likes: 89,
        isLiked: false,
        category: 'tech',
        subcategory: 'backend',
        tags: ['Node.js', 'JavaScript', '后端开发'],
        imageUrl: blogTestImage
    },
    {
        id: 5,
        title: '我的第一次旅行 - 云南大理',
        introduction: '记录在云南大理的美好时光，感受古城的历史韵味和自然风光的壮美。',
        createTime: '2024-01-05',
        likes: 156,
        isLiked: true,
        category: 'life',
        subcategory: 'travel',
        tags: ['旅行', '生活记录', '云南'],
        imageUrl: blogTestImage
    },
    {
        id: 6,
        title: '每日美食分享 - 自制披萨',
        introduction: '分享自制披萨的详细步骤和技巧，从面团制作到配料搭配，让你在家也能享受美味披萨。',
        createTime: '2024-01-03',
        likes: 203,
        isLiked: false,
        category: 'life',
        subcategory: 'food',
        tags: ['美食', '烹饪', '生活记录'],
        imageUrl: blogTestImage
    },
    {
        id: 7,
        title: '《百年孤独》读书笔记',
        introduction: '马尔克斯的魔幻现实主义代表作，探讨孤独、爱情、命运等永恒主题的深刻思考。',
        createTime: '2024-01-01',
        likes: 67,
        isLiked: false,
        category: 'thoughts',
        subcategory: 'reading',
        tags: ['读书笔记', '文学', '思考'],
        imageUrl: blogTestImage
    },
    {
        id: 8,
        title: '《星际穿越》观影感受',
        introduction: '诺兰导演的科幻巨作，探讨时间、空间、爱等深刻主题，令人深思的观影体验。',
        createTime: '2023-12-28',
        likes: 134,
        isLiked: true,
        category: 'thoughts',
        subcategory: 'movie',
        tags: ['电影', '科幻', '观影感受'],
        imageUrl: blogTestImage
    },
    {
        id: 9,
        title: 'Vue.js 入门教程 - 从零开始',
        introduction: '适合初学者的Vue.js入门教程，从环境搭建到第一个组件，循序渐进地学习Vue开发。',
        createTime: '2023-12-25',
        likes: 312,
        isLiked: false,
        category: 'tutorial',
        subcategory: 'beginner',
        tags: ['Vue.js', '教程', '前端开发'],
        imageUrl: blogTestImage
    },
    {
        id: 10,
        title: 'Git 高级使用技巧',
        introduction: '分享Git的高级使用技巧，包括分支管理、版本控制、团队协作等实用技能。',
        createTime: '2023-12-22',
        likes: 178,
        isLiked: true,
        category: 'tutorial',
        subcategory: 'tools',
        tags: ['Git', '工具使用', '开发技巧'],
        imageUrl: blogTestImage
    }
]

// TODO: 调用后端API获取博客文章列表
/**
 * 博客文章列表数据
 * @description 从后端API获取的博客文章数据，包含文章的基本信息和交互状态
 */
const blogPosts = ref<BlogPost[]>([])

/**
 * 加载状态
 * @description 控制文章列表的加载状态
 */
const isLoading = ref(false)

/**
 * 错误信息
 * @description 存储API调用失败时的错误信息
 */
const errorMessage = ref('')

/**
 * 是否使用示例数据
 * @description 标识当前是否显示示例数据（API调用失败时）
 */
const isUsingSampleData = ref(false)

/**
 * 获取博客文章列表
 * @description 从后端API获取博客文章列表，支持分页、分类筛选、标签筛选
 */
const fetchBlogPosts = async () => {
    try {
        // 设置加载状态
        isLoading.value = true
        errorMessage.value = ''
        isUsingSampleData.value = false

        // 构建请求参数
        const params = new URLSearchParams({
            page: currentPage.value.toString(),
            pageSize: pageSize.value.toString()
        })

        // 添加分类筛选参数
        if (selectedCategory.value) {
            params.append('category', selectedCategory.value)
        }

        // 添加标签筛选参数
        if (selectedTag.value) {
            params.append('tag', selectedTag.value)
        }

        // 调用API获取文章列表
        const response = await get(`${API_PATHS.ARTICLE.LIST}?${params.toString()}`, {
            withAuth: false, // 文章列表不需要认证
            timeout: 10000, // 10秒超时
            retry: 2 // 失败重试2次
        })

        if (response.success && response.data) {
            // 成功获取数据
            blogPosts.value = response.data.articles || []
            totalPosts.value = response.data.total || 0

            // 更新分页信息
            if (response.data.pagination) {
                currentPage.value = response.data.pagination.currentPage || 1
                pageSize.value = response.data.pagination.pageSize || 10
            }

            console.log('成功获取博客文章列表:', response.data)
        } else {
            // API返回错误，使用示例数据
            errorMessage.value = response.error || '获取文章列表失败'
            console.error('获取文章列表失败:', response.error)

            // 使用示例数据
            useSampleData()

            // 显示错误提示
            ElMessage.warning('后端服务暂时不可用，显示示例数据')
        }
    } catch (error) {
        // 网络错误或其他异常，使用示例数据
        errorMessage.value = error instanceof Error ? error.message : '网络请求失败'
        console.error('获取文章列表异常:', error)

        // 使用示例数据
        useSampleData()

        // 显示错误提示
        ElMessage.warning('网络连接失败，显示示例数据')

        // 如果是开发环境，显示详细错误信息
        if (import.meta.env.DEV) {
            console.error('详细错误信息:', error)
        }
    } finally {
        // 无论成功还是失败，都要清除加载状态
        isLoading.value = false
    }
}

/**
 * 使用示例数据
 * @description 当API调用失败时，使用示例数据填充页面
 */
const useSampleData = () => {
    // 根据当前筛选条件过滤示例数据
    let filteredSampleData = [...sampleBlogPosts]

    // 按分类筛选
    if (selectedCategory.value) {
        filteredSampleData = filteredSampleData.filter(post => post.category === selectedCategory.value)

        // 如果有子分类，进一步筛选
        if (selectedTag.value) {
            filteredSampleData = filteredSampleData.filter(post => post.tags.includes(selectedTag.value))
        }
    }

    // 按标签筛选
    if (selectedTag.value && !selectedCategory.value) {
        filteredSampleData = filteredSampleData.filter(post => post.tags.includes(selectedTag.value))
    }

    // 设置博客文章数据
    blogPosts.value = filteredSampleData
    totalPosts.value = filteredSampleData.length
    isUsingSampleData.value = true

    console.log('使用示例数据，共', filteredSampleData.length, '篇文章')
}

/**
 * 监听筛选条件变化，重新获取数据
 * @description 当分类、标签、分页等条件变化时，自动重新获取文章列表
 */
watch([selectedCategory, selectedTag, currentPage, pageSize], () => {
    // 重置到第一页
    if (selectedCategory.value || selectedTag.value) {
        currentPage.value = 1
    }
    // 重新获取数据
    fetchBlogPosts()
}, { immediate: true })

/**
 * 总文章数量
 * @description 用于分页组件，表示所有文章的总数量
 */
const totalPosts = ref(0)

// ==================== 计算属性 ====================

/**
 * 根据当前路由参数筛选的博客文章列表
 * @description 根据URL中的分类、子分类或标签参数筛选显示对应的博客文章
 * @returns 筛选后的博客文章数组
 */
const filteredPosts = computed(() => {
    let posts = blogPosts.value

    // 如果有标签参数，按标签筛选
    if (props.tag) {
        posts = posts.filter(post => post.tags.includes(props.tag!))
    }
    // 如果有分类参数，按分类筛选
    else if (props.category) {
        posts = posts.filter(post => post.category === props.category)

        // 如果有子分类参数，进一步按子分类筛选
        if (props.subcategory) {
            posts = posts.filter(post => post.subcategory === props.subcategory)
        }
    }

    return posts
})



/**
 * 当前页面显示的博客文章
 * @description 根据分页参数计算当前页面应该显示的文章
 * @returns 当前页面的文章数组
 */
const currentPagePosts = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return filteredPosts.value.slice(start, end)
})

// ==================== 方法函数 ====================

/**
 * 处理分类链接点击事件
 * @param category 分类名称 ('tech' | 'life' | 'thoughts' | 'tutorial')
 * @description 点击分类链接时，设置该分类为选中状态并展开子分类，然后跳转到分类页面
 */
const handleCategoryClick = (category: string) => {
    console.log('分类点击:', category) // 调试信息
    // 设置当前选中的分类
    selectedCategory.value = category
    // 清除标签的选中状态
    selectedTag.value = ''
    // 展开对应的分类
    openCategories.value[category as keyof typeof openCategories.value] = true
    // 使用编程式导航跳转到分类页面
    router.push(`/category/${category}`)
}

/**
 * 处理子分类链接点击事件
 * @param category 分类名称 ('tech' | 'life' | 'thoughts' | 'tutorial')
 * @param subcategory 子分类名称
 * @description 点击子分类链接时，设置该分类为选中状态并展开子分类，然后跳转到子分类页面
 */
const handleSubcategoryClick = (category: string, subcategory: string) => {
    console.log('子分类点击:', category, subcategory) // 调试信息
    // 设置当前选中的分类
    selectedCategory.value = category
    // 清除标签的选中状态
    selectedTag.value = ''
    // 展开对应的分类
    openCategories.value[category as keyof typeof openCategories.value] = true
    // 使用编程式导航跳转到子分类页面
    router.push(`/category/${category}/${subcategory}`)
}

/**
 * 处理标签链接点击事件
 * @param tag 标签名称
 * @description 点击标签链接时，设置该标签为选中状态并清除分类状态，然后跳转到标签页面
 */
const handleTagClick = (tag: string) => {
    console.log('标签点击:', tag) // 调试信息
    // 设置当前选中的标签
    selectedTag.value = tag
    // 清除分类和子分类的选中状态
    selectedCategory.value = ''
    // 重置所有分类的展开状态
    Object.keys(openCategories.value).forEach(key => {
        openCategories.value[key as keyof typeof openCategories.value] = false
    })
    // 使用编程式导航跳转到标签页面
    router.push(`/tag/${tag}`)
}

/**
 * 切换侧边栏分类的展开/收起状态并设置选中状态
 * @param category 分类名称 ('tech' | 'life' | 'thoughts' | 'tutorial')
 * @description 点击侧边栏分类头部时，展开/收起子分类列表，同时设置该分类为选中状态
 */
const toggleSidebarCategory = (category: string) => {
    console.log('切换分类展开状态:', category) // 调试信息
    // 切换指定分类的展开/收起状态
    openCategories.value[category as keyof typeof openCategories.value] =
        !openCategories.value[category as keyof typeof openCategories.value]
    // 设置当前选中的分类
    selectedCategory.value = category
}

/**
 * 切换博客文章的点赞状态
 * @param postId 博客文章的ID
 * @description 点击点赞按钮时，调用后端API更新点赞状态
 */
const toggleLike = async (postId: number) => {
    try {
        // 根据文章ID查找对应的博客文章
        const blogPost = blogPosts.value.find(p => p.id === postId)
        if (!blogPost) {
            ElMessage.error('文章不存在')
            return
        }

        // 先更新本地状态，提供即时反馈
        const originalLiked = blogPost.isLiked
        const originalLikes = blogPost.likes

        blogPost.isLiked = !blogPost.isLiked
        blogPost.likes += blogPost.isLiked ? 1 : -1

        // 如果正在使用示例数据，只更新本地状态，不调用API
        if (isUsingSampleData.value) {
            ElMessage.success(blogPost.isLiked ? '点赞成功（示例数据）' : '取消点赞成功（示例数据）')
            console.log('示例数据点赞状态更新:', blogPost.isLiked)
            return
        }

        // 调用后端API更新点赞状态
        const response = await post(API_PATHS.ARTICLE.LIKE(postId.toString()), {
            isLiked: blogPost.isLiked
        }, {
            withAuth: true, // 点赞需要用户登录
            timeout: 5000, // 5秒超时
            retry: 1 // 失败重试1次
        })

        if (response.success) {
            // 成功更新点赞状态
            console.log('点赞状态更新成功:', response.data)

            // 显示成功提示
            ElMessage.success(blogPost.isLiked ? '点赞成功' : '取消点赞成功')

            // 如果后端返回了更新后的数据，使用后端数据
            if (response.data && response.data.likes !== undefined) {
                blogPost.likes = response.data.likes
            }
            if (response.data && response.data.isLiked !== undefined) {
                blogPost.isLiked = response.data.isLiked
            }
        } else {
            // API调用失败，恢复本地状态
            blogPost.isLiked = originalLiked
            blogPost.likes = originalLikes

            // 显示错误信息
            const errorMsg = response.error || '点赞操作失败'
            ElMessage.error(errorMsg)
            console.error('点赞操作失败:', response.error)
        }
    } catch (error) {
        // 网络错误或其他异常，恢复本地状态
        const blogPost = blogPosts.value.find(p => p.id === postId)
        if (blogPost) {
            blogPost.isLiked = !blogPost.isLiked
            blogPost.likes += blogPost.isLiked ? 1 : -1
        }

        // 显示错误提示
        ElMessage.error('网络连接失败，请稍后重试')
        console.error('点赞操作异常:', error)

        // 如果是开发环境，显示详细错误信息
        if (import.meta.env.DEV) {
            console.error('详细错误信息:', error)
        }
    }
}

/**
 * 处理分页组件页面大小变化
 * @param size 新的页面大小
 * @description 当用户改变每页显示的文章数量时，更新页面大小并重置到第一页
 */
const handleSizeChange = (size: number) => {
    // 更新页面大小
    pageSize.value = size
    // 重置到第一页，确保用户能看到第一页的内容
    currentPage.value = 1
}

/**
 * 处理分页组件当前页码变化
 * @param page 新的页码
 * @description 当用户点击分页组件中的页码时，更新当前页码
 */
const handleCurrentChange = (page: number) => {
    // 更新当前页码
    currentPage.value = page
}

/**
 * 跳转到博客详情页面
 * @param postId 博客文章的ID
 * @description 点击博客内容区域时，跳转到对应的博客详情页面
 */
const navigateToBlogDetail = (postId: number) => {
    router.push(`/blog-detail/${postId}`)
}

/**
 * 处理联系方式点击事件
 * @param platform 联系方式平台 ('qq' | 'wechat' | 'github')
 * @description 点击联系方式图标时，QQ和微信弹出二维码对话框，GitHub跳转到指定页面
 */
const handleContactClick = (platform: string) => {
    console.log('联系方式点击:', platform) // 调试信息
    switch (platform) {
        case 'qq':
            showQRCodeModal('qq', 'QQ二维码', '扫一扫添加QQ好友', 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=123456789');
            break;
        case 'wechat':
            showQRCodeModal('wechat', '微信二维码', '扫一扫添加微信好友', 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=weixin://');
            break;
        case 'github':
            window.open('https://github.com/morelikeyueyue', '_blank');
            break;
    }
};

/**
 * 显示二维码对话框
 * @param type 二维码类型 ('qq' | 'wechat')
 * @param title 对话框标题
 * @param description 描述文字
 * @param qrCodeUrl 二维码图片URL
 */
const showQRCodeModal = (type: string, title: string, description: string, qrCodeUrl: string) => {
    // 创建模态框容器
    const modal = document.createElement('div');
    modal.className = 'qr-code-modal';
    modal.innerHTML = `
        <div class="modal-overlay">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">${title}</h3>
                    <button class="close-btn" aria-label="关闭">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="qr-code-container">
                        <img src="${qrCodeUrl}" alt="${title}" class="qr-code-image" />
                    </div>
                    <p class="qr-code-description">${description}</p>
                </div>
            </div>
        </div>
    `;

    // 创建样式
    const style = document.createElement('style');
    style.id = `qr-code-modal-style-${type}`;
    style.textContent = `
        .qr-code-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .qr-code-modal .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .qr-code-modal .modal-content {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            animation: modalSlideIn 0.3s ease-out;
            position: relative;
            z-index: 1;
        }
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        .qr-code-modal .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px 16px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .qr-code-modal .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin: 0;
        }
        
        .qr-code-modal .close-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            color: #6b7280;
            transition: all 0.2s;
        }
        
        .qr-code-modal .close-btn:hover {
            background: #f3f4f6;
            color: #374151;
        }
        
        .qr-code-modal .modal-body {
            padding: 24px;
            text-align: center;
        }
        
        .qr-code-modal .qr-code-container {
            margin-bottom: 16px;
        }
        
        .qr-code-modal .qr-code-image {
            width: 200px;
            height: 200px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .qr-code-modal .qr-code-description {
            color: #6b7280;
            font-size: 14px;
            margin: 0;
            line-height: 1.5;
        }
    `;

    // 添加到页面
    document.head.appendChild(style);
    document.body.appendChild(modal);

    // 关闭模态框函数
    const closeModal = () => {
        modal.remove();
        const styleElement = document.getElementById(`qr-code-modal-style-${type}`);
        if (styleElement) {
            styleElement.remove();
        }
    };

    // 绑定关闭事件
    const overlay = modal.querySelector('.modal-overlay');
    const closeBtn = modal.querySelector('.close-btn');

    if (overlay) {
        overlay.addEventListener('click', (e) => {
            if (e.target === e.currentTarget) {
                closeModal();
            }
        });
    }

    if (closeBtn) {
        closeBtn.addEventListener('click', closeModal);
    }

    // ESC键关闭
    const handleEscKey = (e: KeyboardEvent) => {
        if (e.key === 'Escape') {
            closeModal();
            document.removeEventListener('keydown', handleEscKey);
        }
    };
    document.addEventListener('keydown', handleEscKey);
};

/**
 * 根据路由参数更新选中的分类和标签
 * @description 当路由参数变化时，更新侧边栏中选中的分类和标签状态
 */
const updateSelectedCategory = () => {
    if (props.tag) {
        // 如果有标签参数，设置选中的标签并清除分类状态
        selectedTag.value = props.tag
        selectedCategory.value = ''
        // 重置所有分类的展开状态
        Object.keys(openCategories.value).forEach(key => {
            openCategories.value[key as keyof typeof openCategories.value] = false
        })
    } else if (props.category) {
        // 如果有分类参数，设置选中的分类并清除标签状态
        selectedCategory.value = props.category
        selectedTag.value = ''
        // 如果有子分类，展开对应的分类
        if (props.subcategory) {
            openCategories.value[props.category as keyof typeof openCategories.value] = true
        }
    } else {
        // 如果没有任何参数，清除所有选中状态
        selectedCategory.value = ''
        selectedTag.value = ''
        // 重置所有分类的展开状态
        Object.keys(openCategories.value).forEach(key => {
            openCategories.value[key as keyof typeof openCategories.value] = false
        })
    }
}

// ==================== 监听器和生命周期 ====================

// 监听路由参数变化，更新选中状态和重置分页
watch(() => [props.category, props.subcategory, props.tag], () => {
    updateSelectedCategory()
    // 重置分页到第一页
    currentPage.value = 1
}, { immediate: true })

// 组件挂载时初始化选中状态
onMounted(() => {
    updateSelectedCategory()
})
</script>

<style scoped lang="scss">
// 导入博客页面组件样式
@use '../assets/styles/clients/_blog';
</style>